<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix='security' uri='http://www.springframework.org/security/tags' %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="jwr"  uri="http://jawr.net/tags-el" %>
<style type="text/css">
	tr:hover {
		
	}

</style>
<div id="templatemo_content_section">
	
    <h1>Menu Items</h1>
    <div id="menu" class="yui-skin-sam gray-form-background" style="padding: 20px; 0px;min-height: 300px;color: #F7921D;">
		<div id="categoryTreeDiv"></div> 
	</div>
</div>
    
   <script>
  dojo.addOnLoad(function() {
	//Load existing menus if availables
		YAHOO.util.Connect.asyncRequest("GET", "category/list", {
			cache : false,
			success : function(o) {
				var response = (o.getResponseHeader['Content-Type'].indexOf('json') > -1);
				if (response) {
					var responseText = YAHOO.lang.JSON.parse(o.responseText);
					if (responseText.categoryList.length > 0) {
						initMenuCategory(responseText.categoryList);
					}else{
						alert("Menu Categories are not available.");
					}
					
				}
			},
			failure : function(o) {
				displayErrorMessage("Not able to submit Laboratory details for approval at this time, please try again later.", "lab-approval-status-message");
			}
		});
	  
  });
  
  function initMenuCategory(categoryList) { 
	   //create a new tree: 
	   tree = new YAHOO.widget.TreeView("categoryTreeDiv"); 
	 
	   //turn dynamic loading on for entire tree: 
	   tree.setDynamicLoad(loadNodeData, false); 
	 
	   //get root node for tree: 
	   var root = tree.getRoot(); 
	 
	   //add child nodes for tree; our top level nodes are bands 
	   //var bands = ["Radiohead","Phoenix","Bon Iver","Born Ruffians","LCD Soundsystem","Blind Pilot","The Black Keys"]; 
	 
	   for (var i=0, j=categoryList.length; i<j; i++) { 
		   
	        var tempNode = new YAHOO.widget.TextNode(
	        		{label: "<div style=\"color:#D71820;font-weight:bold\">"+categoryList[i].label+"</div>", id:categoryList[i].id}, root, false); 
	   } 
	 
	   //render tree with these toplevel nodes; all descendants of these nodes 
	   //will be generated as needed by the dynamic loader. 
	   tree.draw(); 
	} 

	function loadNodeData(node, fnLoadComplete)  { 
	    //We'll load node data based on what we get back when we 
	    //use Connection Manager topass the text label of the 
	    //expanding node to the Yahoo! 
	    //Music track search API.  Here, we're at the 
	    //first part of the request -- we'll make the request to the 
	    //server.  In our success handler, we'll build our new children 
	    //and then return fnLoadComplete back to the tree. 
	 
	    //Get the node's label and urlencode it; this is the word/s 
	    //on which we'll search for related words: 
	    var nodeLabel = encodeURI(node.label); 
	    //prepare URL for XHR request: 
	    var sUrl = "category/item?categoryId=" + node.data.id; 
	 
	    //prepare our callback object 
	    var callback = { 
	 
	        //if our XHR call is successful, we want to make use 
	        //of the returned data and create child nodes. 
	        success: function(oResponse) { 
	        	var response = (oResponse.getResponseHeader['Content-Type'].indexOf('json') > -1);
				if (response) {
					var responseText = YAHOO.lang.JSON.parse(oResponse.responseText);
					if (responseText.menuList.length > 0) {
						var menuList = responseText.menuList;
						 for (var i=0, j= menuList.length; i<j; i++) {
							tempNode = new YAHOO.widget.TextNode(									
									{label: createItemDescription(menuList[i].menu, i%2), id:menuList[i].menu.id}
									, node, false); 
							 
	                        // we can tell the tree node that this is a leaf node so 
	                        // that it doesn't try to dynamically load children. 
	                        tempNode.isLeaf = true; 
	 
	                        // Define a href so that a click on the node will navigate 
	                        // to the page that has the track that you may be able 
	                        // to listen to. 
	                        //tempNode.href = url; 
						 }
					}
	            
		            //When we're done creating child nodes, we execute the node's 
		            //loadComplete callback method which comes in via the argument 
		            //in the response object (we could also access it at node.loadComplete, 
		            //if necessary): 
	            	oResponse.argument.fnLoadComplete(); 
				}
	        }, 
	 
	        //if our XHR call is not successful, we want to 
	        //fire the TreeView callback and let the Tree 
	        //proceed with its business. 
	        failure: function(oResponse) { 
	            YAHOO.log("Failed to process XHR transaction.", "info", "example"); 
	            oResponse.argument.fnLoadComplete(); 
	        }, 
	 
	        //our handlers for the XHR response will need the same 
	        //argument information we got to loadNodeData, so 
	        //we'll pass those along: 
	        argument: { 
	            "node": node, 
	            "fnLoadComplete": fnLoadComplete 
	        }, 
	 
	        //timeout -- if more than 7 seconds go by, we'll abort 
	        //the transaction and assume there are no children: 
	        timeout: 7000 
	    }; 
	 
	    //With our callback object ready, it's now time to 
	    //make our XHR call using Connection Manager's 
	    //asyncRequest method: 
	    YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
	} 
	
	function createItemDescription(menu, i){
		var menuDescription ="<div style=\"padding-bottom:10px;padding-left:5px\" class=\"report"+i+"\">";
		menuDescription = menuDescription + "<div style=\"float:left\">";
		menuDescription = menuDescription + "<b>"+menu.name+"</b></div>";
		menuDescription = menuDescription + "<div style=\"float:right;padding-right:10px;\"> Rs. "+menu.amount+"</div>";
		menuDescription = menuDescription +"<div style=\"clear:both\"></div>";
		menuDescription = menuDescription +"<div style=\"border-bottom:#E5B126 dotted 1px;color:black;\">"+menu.description+"</div>";
		menuDescription = menuDescription +"</div>";
		return menuDescription;
	}
  </script>